import { useEffect, useRef, useState } from "react"
import lessModule from "./index.module.less"
import HomePage_HeaderOperationComponentTabComponent from "./component/tab"
import HomePage_HeaderOperationComponent_OperationComponent from "./component/operation"

import HomePage_ModalComponent from "../modal"
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../common/utils"
import HomePage_ModalComponent_SelectMonitorModalComponent from "../modal/component/selectMonitorModal"


// 主页-头部操作组件
interface componentInterface {
  tabList?: Array<object>
  operationData?: object
}
const HomePage_HeaderOperationComponent: React.FC<componentInterface> = (props) => {
  const componentRef = useRef<HTMLDivElement>(null);
  const [isOpenCondition, setIsOpenCondition] = useState<boolean>(false)
  const [tabData, setTabData] = useState<object>({});
  const [isSelectMonitorModal, setIsSelectMonitorModal] = useState<boolean>(false)
  const [selectMonitorModalData, setSelectMonitorModalData] = useState<object>({})
  const [operationData,setOperationData] = useState<object>()
  const change_tabData = (data: object) => {
    setTabData({ ...data })
  }

  const change_openSelectMonitorModal = (data: object) => { 
    data['stationData'] ??= {}
    setSelectMonitorModalData({ ...data })
    setIsSelectMonitorModal(true)
  }

  const emit_headerOperationHeight = () => {
    setTimeout(() => {
      $eventBus.emit("headerOperationHeight", { source: "HomePage_HeaderOperationComponent", explain: "操作头部高度已更新，请进行相应的操作", data: { height: componentRef.current?.clientHeight } })
    });
  }

  // 广播函数数据
  const eventBusFuncData = { 
    headerOperationConditionSwitch : (data: object) => {
      setIsOpenCondition(data["data"]["isOpen"])
    },
    openSelectMonitorModal : (data: object) => {
      change_openSelectMonitorModal(data)
    }
}
  useEffect(() => {
    emit_headerOperationHeight()
  }, [componentRef.current?.clientHeight])

  useEffect(() => {
    setOperationData({...props.operationData})
    $EventBus_on(eventBusFuncData)
    return () => {
      $EventBus_off(eventBusFuncData)
    }
  }, [])
  return (
    <div ref={componentRef} className={lessModule["homePageHeaderOperationComponent"]} style={{ padding: isOpenCondition ? "8px 16px" : "0 16px 0 0" }}>
      {!isOpenCondition && <HomePage_HeaderOperationComponentTabComponent tabList={props.tabList ?? []} change_tabData={change_tabData} />}
      <HomePage_HeaderOperationComponent_OperationComponent sourceData={tabData["operationData"] || operationData} />
      {
        isSelectMonitorModal && <HomePage_ModalComponent width={730} change_cancel={() => setIsSelectMonitorModal(false)} contentComponent={<HomePage_ModalComponent_SelectMonitorModalComponent modalName={selectMonitorModalData["modalName"]} stationData={selectMonitorModalData["stationData"]} operation={selectMonitorModalData["operation"]} monitoringType={selectMonitorModalData["monitoringType"]} mode={selectMonitorModalData['mode']} selectedList={selectMonitorModalData["selectedList"]} selectedOtherList={selectMonitorModalData["selectedOtherList"]} click_cancel={() => setIsSelectMonitorModal(false)} isDateTimePickerRange={selectMonitorModalData["isDateTimePickerRange"]} />} />
      }
    </div>
  )
}



export default HomePage_HeaderOperationComponent 